 <template>
  <div id="bigbox">
    <div class="box1"><a href="#"></a><span>钻石珠宝</span></div>
    <!--<div style="height: 54px"></div>-->
    <div class="box2">
      <!--轮播图-->
      <div style="height:200px"
        id="carouselExampleIndicators"
        class="carousel slide"
        data-ride="carousel"
      >
        <div class="carousel-inner">
          <div
            class="carousel-item"
            :class="`item ${index === 0 ? 'active' : ''}`"
            v-for="(item, index) in lunbo"
            :key="index"
          >
            <img :src="item.src" class="d-block w-100" alt="..." />
          </div>
        </div>
      </div>
    </div>
    <div class="box3">
      <router-link to="/ring"
        ><img src="../../public/img/11.png" alt="" />
        <p>戒指</p></router-link
      >
      <router-link to="/earring"
        ><img src="../../public/img/22.png" alt="" />
        <p>耳饰</p></router-link
      >
      <router-link to="/braceiet"
        ><img src="../../public/img/33.png" alt="" />
        <p>手链</p></router-link
      >
      <router-link to="/necklace"
        ><img src="../../public/img/44.png" alt="" />
        <p>项链</p></router-link
      >
    </div>
    <div class="box4">
      <span></span>
      <p>卖货高手</p>
    </div>
    <div class="box5">
      <ul>
        <li><img src="../../public/img/111.jpg" alt="" /></li>
        <li><img src="../../public/img/222.jpg" alt="" /></li>
        <li><img src="../../public/img/333.jpg" alt="" /></li>
        <li><img src="../../public/img/444.jpg" alt="" /></li>
      </ul>
    </div>
    <div class="box6">
      <span></span>
      <p>热卖新品</p>
    </div>
    <div class="box7">
      <img src="../../public/img/one.jpg" alt="" />
    </div>
    <div class="box8">
      <ul>
        <li>30</li>
        <li>60</li>
        <li>80</li>
        <li>100</li>
      </ul>
    </div>
    <div class="box9">
      <div>
        <span class="span1">满399减</span><a href="" class="a1">领券</a>
      </div>
      <div>
        <span class="span2">满699减</span><a href="" class="a2">领券</a>
      </div>
      <div>
        <span class="span1">满899减</span><a href="" class="a1">领券</a>
      </div>
      <div>
        <span class="span2">满1299减</span><a href="" class="a2">领券</a>
      </div>
    </div>
    <div class="box10">
      <img src="../../public/img/two.jpg" alt="" />
    </div>
    <div class="box11">
      <span></span>
      <p>会员专区</p>
    </div>
    <div class="box12">
      <div class="left" v-for="(item, index) in huiyuan" :key="index">
        <img :src="item.src" @click="tiao(huiyuan, index)" alt="" />
        <p>{{ item.title }}</p>
        <p class="p1">
          <span>￥{{ item.money }}</span
          ><span class="iconfont icon-jiarugouwuche"></span>
        </p>
      </div>
    </div>
    <div class="box14">
      <img src="../../public/img/three.jpg" alt="" />
    </div>
    <div class="box15">
      <span></span>
      <p>精选专区</p>
    </div>
    <div class="box16">
      <ul>
        <li v-for="(item, index) in jingxuan" :key="index">
          <div>
            <img @click="tiao(jingxuan, index)" :src="item.src" alt="" />
          </div>
          <div>
            <p>{{ item.title }}</p>
            <p class="p1">
              <span
                >￥<span>{{ item.money }}</span></span
              ><span class="iconfont icon-jiarugouwuche"></span>
            </p>
          </div>
        </li>
        <!-- <li>
          <div><img src="../../public/img/bb.jpg" alt="" /></div>
          <div>
            <p>
              Leysen钻石耳坠 18K金钻石耳钉女 女王时刻 群镶钻石耳饰 耳钉+耳坠
            </p>
            <p class="p1">
              <span>￥1388-￥4140</span
              ><span class="iconfont icon-jiarugouwuche"></span>
            </p>
          </div>
        </li>
        <li>
          <div><img src="../../public/img/cc.jpg" alt="" /></div>
          <div>
            <p>Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣 专柜同款</p>
            <p class="p1">
              <span>￥3380</span
              ><span class="iconfont icon-jiarugouwuche"></span>
            </p>
          </div>
        </li>
        <li>
          <div><img src="../../public/img/dd.jpg" alt="" /></div>
          <div>
            <p>
              Leysen月桂女神钻石吊坠女 唐嫣同款18K金钻石项链 黄18K金+K链套餐
            </p>
            <p class="p1">
              <span>￥5999</span
              ><span class="iconfont icon-jiarugouwuche"></span>
            </p>
          </div>
        </li>
        <li>
          <div><img src="../../public/img/ee.jpg" alt="" /></div>
          <div>
            <p>Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠</p>
            <p class="p1">
              <span>￥2120</span
              ><span class="iconfont icon-jiarugouwuche"></span>
            </p>
          </div>
        </li>
        <li>
          <div><img src="../../public/img/ff.jpg" alt="" /></div>
          <div>
            <p>
              Leysen月桂女神钻石耳饰女 专柜同款18K金玉石耳饰 黄18K金+K链套餐
            </p>
            <p class="p1">
              <span>￥5999</span
              ><span class="iconfont icon-jiarugouwuche"></span>
            </p>
          </div>
        </li> -->
      </ul>
    </div>
    <!-- <div class="box17">
      <div>欢迎来店选购</div>
      <a href="">查看地址</a>
    </div>-->
    <div class="box18">
      <router-link to="/car"
        ><span class="iconfont icon-jiarugouwuche"></span
      ></router-link>
    </div>
    <!--回到顶部-->
    <div class="return-top" v-show="gotop" @click="toTop"></div>
    <!--这个盒子目的为了撑开内容 不用管-->
    <div style="height: 50px"></div>
  </div>
</template>

<style lang="less" scoped>
/*初始化*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}
.box1 {
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 50px;
  font-size: 14px;
  text-align: center;
  line-height: 53px;
  border-bottom: 1px solid #d8d8d8;
  /*position: relative;*/
  background: black;
  span {
    color: white;
  }
  a {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    // background: url("../../public/img/arrow-left.png") no-repeat center center;
    background-size: 50%;
  }
}
.box2 {
  width: 100%;
  margin-top: 50px;
  // img {
  //   width: 100%;
  // }
}
.box3 {
  border-bottom: 10px solid #f2f2f2;
  padding: 20px 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  a {
    font-size: 15px;
    flex: 1;
    text-align: center;
    color: black;
  }
  p {
    padding-top: 8px;
  }
  img {
    width: 50px;
    height: 50px;
  }
}
.box4 {
  width: 100%;
  span {
    width: 6px;
    height: 17px;
    background: #cc0000;
  }
  p {
    padding-left: 10px;
  }
  margin-top: 5px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  height: 40px;
  line-height: 40px;
  font-size: 17px;
}
.box5 {
  width: 100%;
  ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    li {
      margin-top: 10px;
      width: 46%;
    }
  }
  img {
    width: 100%;
    height: 160px;
  }
}
.box6 {
  width: 100%;
  span {
    width: 6px;
    height: 17px;
    background: #cc0000;
  }
  p {
    padding-left: 10px;
  }
  border-top: 10px solid #f2f2f2;
  margin-top: 28px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  height: 60px;
  line-height: 60px;
  font-size: 17px;
}
.box7 {
  width: 100%;
  img {
    width: 100%;
  }
}
.box8 {
  width: 100%;
  margin: 20px 0;
  ul {
    display: flex;
    justify-content: space-around;
    li {
      width: 10%;
      height: 28px;
      text-align: center;
      font-size: 16px;
      font-weight: normal;
    }
  }
  ul > li:nth-child(2n-1) {
    color: #cc0000;
    border-bottom: 1px solid #cc0000;
  }
  ul > li:nth-child(2n) {
    color: #000000;
    border-bottom: 1px solid #000000;
  }
}
.box9 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  div {
    display: flex;
    flex-direction: column;
    width: 15%;
    text-align: center;
    span {
      font-size: 13px;
    }
    a {
      width: 60px;
      height: 30px;
      line-height: 30px;
      margin-top: 4px;
      text-align: center;
      display: block;
      font-size: 12px;
      color: #ffffff;
    }
  }
  .span1 {
    color: #cc0000;
  }
  .span2 {
    color: #000000;
  }
  .a1 {
    background: #cc0000;
  }
  .a2 {
    background: #000000;
  }
}
.box10 {
  margin-top: 30px;
  border-top: 10px solid #f2f2f2;
  img {
    width: 100%;
  }
}
.box11 {
  width: 100%;
  span {
    width: 6px;
    height: 17px;
    background: #cc0000;
  }
  p {
    padding-left: 10px;
  }
  margin: 6px 0;
  padding-left: 10px;
  display: flex;
  align-items: center;
  height: 40px;
  line-height: 40px;
  font-size: 17px;
}
.box12 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  div {
    width: 49%;
  }
  .left {
    img {
      width: 100%;
    }
    .p1 {
      display: flex;
      justify-content: space-between;
      .iconfont {
        font-size: 18px;
      }
    }
    p {
      margin: 5px 0;
      padding: 0 0 0 10px;
      color: #000000;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 170px;
    }
    span {
      color: #cc0000;
    }
  }
}
.box13 {
  display: flex;
  justify-content: space-between;
  div {
    width: 49%;
  }
  .left {
    img {
      width: 100%;
    }
    .p1 {
      display: flex;
      justify-content: space-between;
      .iconfont {
        font-size: 18px;
      }
    }
    p {
      margin: 5px 0;
      padding: 0 0 0 10px;
      color: #000000;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 170px;
    }
    span {
      color: #cc0000;
    }
  }
  .right {
    img {
      width: 100%;
    }
    .p2 {
      display: flex;
      justify-content: space-between;
      .iconfont {
        font-size: 18px;
      }
    }
    p {
      margin: 5px 0;
      padding: 0 0 0 10px;
      color: #000000;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 170px;
    }
    span {
      color: #cc0000;
    }
  }
}
.box14 {
  margin-top: 5px;
  border-top: 10px solid #f2f2f2;
  img {
    width: 100%;
  }
}
.box15 {
  width: 100%;
  span {
    width: 6px;
    height: 17px;
    background: #cc0000;
  }
  p {
    padding-left: 10px;
  }
  margin: 8px 0;
  padding-left: 10px;
  display: flex;
  align-items: center;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
}
.box16 {
  li {
    width: 100%;
    padding: 0 10px;
    margin-top: 20px;
    display: flex;
    /*li下面的第1个盒子*/
    div:nth-child(1) {
      width: 30%;
      img {
        width: 100%;
      }
    }
    /*li下面的第2个盒子*/
    div:nth-child(2) {
      padding-left: 15px;
      width: 70%;
      .p1 {
        display: flex;
        justify-content: space-between;
        .iconfont {
          font-size: 18px;
        }
      }
      p {
        margin: 5px 0;
        padding: 0 0 0 10px;
        color: #000000;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 220px;
      }
      span {
        color: #cc0000;
      }
    }
  }
}
/*  .box17{
    background: url('../../public/img/last.png') no-repeat center center;
    width: 100%;
    height: 166px;
    margin-top: 18px;
    padding-top: 52px;
    div{
      width: 100%;
      color: #F2F2F2;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
    }
    a{
      display: block;
      width: 140px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #cc0000;
      color: #ffffff;
      margin: auto;
    }
}*/
.box18 {
  position: fixed;
  bottom: 65px;
  right: 6px;
  width: 37px;
  height: 37px;
  line-height: 37px;
  background: #cccccc;
  border-radius: 50%;
  text-align: center;
  .iconfont {
    font-size: 20px;
    color: #ffffff;
  }
}
.return-top {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 100px;
  right: 0;
  background: url("../../public/img/topback.png") no-repeat center center;
  background-size: 70%;
}
</style>

<script>
import $ from "jquery";
// 引入事件中央中线
// import bus from  '@/bus.js';
export default {
  data() {
    return {
      gotop:false,//回到顶部开关
      //轮播的数据
      lunbo: [
        // {
        //   src: "img/1.jpg",
        // },
        // {
        //   src: "img/2.jpg",
        // },
        // {
        //   src: "img/1.jpg",
        // },
        // {
        //   src: "img/2.jpg",
        // },
      ],
      //会员专区里面的数据
      huiyuan: [
        // {
        //   src: "img/a.jpg",
        //   title: "Leysen小王子的星空 金18k钻石吊坠女 钻石项链女 玫瑰金",
        //   money: "2998",
        // },
        // {
        //   src: "img/b.jpg",
        //   title: "Leysen钻石耳坠 18K金钻石耳钉女 女王时刻 群镶钻石耳饰",
        //   money: "4140",
        // },
        // {
        //   src: "img/c.jpg",
        //   title: "Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣",
        //   money: "3380",
        // },
        // {
        //   src: "img/d.jpg",
        //   title: "Leysen月桂女神钻石吊坠女 唐嫣同款18K金钻石项链 黄金",
        //   money: "5999",
        // },
      ],
      //精选专区里面的数据
      jingxuan: [
        // {
        //   src: "img/aa.jpg",
        //   title: "Leysen小王子的星空 金18k钻石吊坠女 钻石项链女玫瑰金",
        //   money: "2998",
        // },
        // {
        //   src: "img/bb.jpg",
        //   title: " Leysen钻石耳坠 18K金钻石耳钉女 女王时刻 群镶钻石耳饰",
        //   money: "4140",
        // },
        // {
        //   src: "img/cc.jpg",
        //   title: "Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣",
        //   money: "3380",
        // },
        // {
        //   src: "img/dd.jpg",
        //   title: "Leysen月桂女神钻石吊坠女 唐嫣同款18K金钻石项链 黄金",
        //   money: "5999",
        // },
        // {
        //   src: "img/ee.jpg",
        //   title: "Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠",
        //   money: "2120",
        // },
        // {
        //   src: "img/ff.jpg",
        //   title: " Leysen月桂女神钻石耳饰女 专柜同款金玉石耳饰 K链套餐",
        //   money: "5999",
        // },
      ],
    };
  },
  mounted() {
    //要连接数据库前后端互调就开启注释
     this.$axios.get('http://47.111.93.194:3003/home').then((data)=>{
      // console.log(data.data[0].lunbo);
      //  console.log(JSON.parse(data.data[0].lunbo));
      //这是使用了连接数据库拿取的数据 以后要用 直接取消注释 注意：后端也要在对应的文件中去写代码 去数据库拿取东西传过来
      // this.lunbo=JSON.parse(data.data[0].lunbo)
      // this.huiyuan=JSON.parse(data.data[0].huiyuan)
      // this.jingxuan=JSON.parse(data.data[0].jingxuan)
      
      //不连接数据库
      console.log(data);
      this.lunbo=data.data.lunbo;
      this.huiyuan=data.data.huiyuan;
      this.jingxuan=data.data.jingxuan;
    })


    $(".carousel").carousel({
      interval: 2000,
    });

    // 不加滚动事件绑定不成功 true加不加无所谓
    window.addEventListener("scroll", this.handleScroll,true);
  },
  methods: {
    
    tiao(arr, index1) {
      //形参
      var obj = {};

      arr.some((item, index) => {
        if (index1 == index) {
          obj = item;
          //把数据传到后台 防止刷新详情页面内容不存在
          localStorage.setItem("obj1", JSON.stringify(obj)); //对象转字符串
        }
      });
      //传数据
      this.$router.push({
        name: "Hui",
        params: { obj1: obj },
      });
    },
    //回到顶部
    handleScroll() {
       let scrolltop = document.documentElement.scrollTop || window.screenTop;
      scrolltop > 100 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      //获取页面的滚动的高度
      let top = document.documentElement.scrollTop || window.screenTop;
      //console.log(top);
      // 实现滚动效果 
      let timer = setInterval(() => {
        window.screenTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          //清除定时器
          clearInterval(timer);
          timer=null;
        }
      }, 15);
    }
  },
};
</script> 